<template>
    <div class="common" v-loading="loading">
        <div class="breadcrumb">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/article/index' }">分类管理</el-breadcrumb-item>
                <el-breadcrumb-item>{{menu}}</el-breadcrumb-item>
            </el-breadcrumb>
            <div class="backbutton" v-show="bbshow">
                <el-button plain >返回</el-button>
            </div>
        </div>
        <div class="meta-divder"></div>

        <el-row>
            <el-row class="wdh-search">
                <el-col :span="4">
                    <el-button  type="primary" @click="addCate()">
                        <i class="fa fa-plus" aria-hidden="true"></i>
                        <span style="margin-left:3px">新增分类</span>   
                    </el-button>
                </el-col>
                <el-col :span="20">
                    <el-row type="flex" :gutter="5" justify="end">                   
                        <el-col :span="4">
                            <el-input  v-model="searchParams.name"  placeholder="输入分类名称" clearable></el-input>
                        </el-col>                
                        <el-button-group class="wdh-search-button">
                            <el-button type="primary" icon="el-icon-search" @click="goSearch(1)"></el-button>
                            <el-button icon="el-icon-refresh" @click="goSearch(2)"></el-button>
                        </el-button-group>
                    </el-row>
                </el-col>
            </el-row>

            <!--分类列表-->
            <el-row class="wdh-table">
                <el-table :data="cateList" style="width: 100%;">
                    <el-table-column prop="id" label="分类ID" width="120" header-align="center" align="center"></el-table-column>
                    <el-table-column prop="sort" label="分类排序" width="120" header-align="center" align="center"></el-table-column>
                    <el-table-column prop="name" label="分类名称" width="200" header-align="center" align="center"></el-table-column>              
                    <el-table-column prop="created_at" label="注册时间"  width="180" header-align="center" align="center"></el-table-column>
                    <el-table-column prop="brief" label="分类简介" header-align="center" align="center"></el-table-column>
                 
                    <el-table-column fixed="right" label="操作" width="160" header-align="center" align="center">
                            <template slot-scope="scope">
                                <el-row class="operation-btn">
                                    <el-button type="text" size="small" title="编辑" @click="eiditCate(scope.row)">
                                        <i class="fa fa-pencil" aria-hidden="true" style="color:#409eff"></i>
                                    </el-button>
                                    <el-button type="text" size="small" title="删除" @click="del(scope.row.id)">
                                        <i class="fa fa-trash" aria-hidden="true" style="color:#ff4d4f"></i>
                                    </el-button>

                                    <el-button type="text" size="small" title="上移" @click="level(scope.row,'up')" :disabled="scope.$index == 0">
                                        <i class="fa fa-level-up" aria-hidden="true" style="color:#52c41a"></i>
                                    </el-button>

                                    <el-button type="text" size="small" title="下移" @click="level(scope.row,'down')" :disabled="scope.$index+1 == pagination.total">
                                        <i class="fa fa-level-down" aria-hidden="true" style="color:orange"></i>
                                    </el-button>



                                </el-row>
                            </template>

                    </el-table-column>
                </el-table>
                <!--加载分页组件-->
                <v-page @getTable="getCateList" v-bind:pagination="pagination"></v-page>                                  
            </el-row>

        </el-row>
      
        <!--分类添加、编辑-->
        <el-dialog :visible.sync="dialogFormVisible">
            <div slot="title" class="header-title">
                <span class="title-name"> {{ dialogTitle }}</span>
            </div>
            <el-form :model="form">
                <el-form-item label="分类名称" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="分类简介" :label-width="formLabelWidth">
                    <el-col>
                        <el-input type="textarea" :rows="5" placeholder="请填写一句话简介" v-model="form.brief" maxlength="50" show-word-limit>
                        </el-input>
                    </el-col>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancelAdd()">取 消</el-button>
                <el-button type="primary" @click="submitButton()">确 定</el-button>
            </div>
        </el-dialog>

    

        
    </div>
</template>
<script>
    export default {
        data() {
            return {
                loading:false,
                bbshow:false,
                menu:'类别列表',
                searchParams: {
                    name: ''
                },
                pagination:{
                    current_page: 1,
                    page_sizes: [10, 20, 30, 40],
                    limit: 10,
                    total: 0
                },
                cateList:[],
                dialogTitle:'添加分类',
                dialogFormVisible:false,
                formLabelWidth: '80px',
                form:{
                    id:0,
                    name:'',
                    brief:''
                }

            
            }
        },
        mounted(){
            this.getCateList();

        },
        methods: {

            //获取用户数据列表
            getCateList(pagination){
                if (pagination) {
                    this.pagination.current_page = pagination.current_page;
                    this.pagination.limit = pagination.limit;
                }
                let dt = {
                    params: {
                        page: this.pagination.current_page,
                        limit: this.pagination.limit,
                        name: this.searchParams.name
                    }
                };
                window.axios.get('/api/category/list',dt).then((res) => {
                    this.loading = false;
                    if (res.data.code == 200) {
                        this.cateList = res.data.data.data;
                        this.pagination.total = res.data.data.total;
                        this.pagination.current_page = res.data.data.current_page;
                    } else {
                        this.$message(res.data.msg);
                    }
                });

            },

            //搜索
            goSearch(val){
                if(val == 2){
                    this.searchParams.name = '';
                }
                
                this.pagination.paging = 1;
                this.getCateList();
                
            },

            //保存操作
            submitButton(){      
                this.loading = true; 
                //添加
                let url = '/api/category/save';                              
                window.axios.post(url, this.form).then((res) => {
                    this.loading = false;
                    if (res.data.code === 200) {
                        this.$message({
                            type: 'success',
                            message: '保存成功'
                        });
                        this.cancelAdd();
                        this.getCateList();
                        
                    } else {
                        this.$message.error(res.data.message);
                    }
                }).catch((error) => {
                    this.loading = false;
                    this.$message.error('保存失败，错误信息：' + error);
                });
                 
            },

            cancelAdd(){
                this.dialogFormVisible = false;
                this.form = {
                    id:0,
                    name:'',
                    brief:''
                };
                //this.$refs.form.clearValidate();
            },

            //打开新增
            addCate(){
                this.dialogTitle = '添加分类';
                this.dialogFormVisible = true;
                this.form = {
                    id:0,
                    name:'',
                    brief:''
                }
            },
            //编辑
            eiditCate(row){
                this.dialogTitle = '编辑分类';
                this.dialogFormVisible = true;

                this.form = {
                    id:row.id,
                    name:row.name,
                    brief:row.brief
                }

            },

            //删除
            del(id){
                

            },


            //上移 下移
            level(row,str){
                let dt = {
                        id: row.id,
                        sort: row.sort,
                        flag: str
                };
                window.axios.put('/api/category/level', dt).then((res) => {
                    this.loading = false;
                    if (res.data.code === 200) {
                        
                        this.$message({
                            type: 'success',
                            message: '移动成功'
                        });
                        
                        this.getCateList();
                        
                    } else {
                        this.$message.error(res.data.message);
                    }
                }).catch((error) => {
                    this.loading = false;
                    this.$message.error('保存失败，错误信息：' + error);
                });


            }



        },
    }
</script>
<style>

    .common{     
        border-radius: 10px;
        background: #fff;
        margin: 10px;
        box-shadow: 1px 3px 7px 0 rgb(12 64 168 / 20%);
    }

    .breadcrumb{
        padding:20px;
        color:#666;
    }
    .backbutton{
        position: relative;
        float: right;
        top: -25px;
        right: 50px;
    }
    
    .is-link{
        color:#666!important;
    }
    .el-breadcrumb__item:hover  .is-link{
        color:#409EFF!important;
    }
    .meta-divder{
        font-weight: 400;
        font-size: 1rem;
        border-top: 1px solid #d3e0e9;
        border-bottom: 1px solid rgba(211,224,233,.15);
        margin: 1rem 0;
        line-height: 1;
        margin:0 20px;
    }
    .common-button{
        margin-bottom: 25px;
        background-color: #f2f7fa;
        width: 100%;
        text-align: center;
        height: 50px;
    }

    .el-dialog {
        width:35%;
    }
    .el-col-24{
        padding-left:0!important;
        padding-right:0!important;
    }
    .el-form-item__content{
        padding-right:25px!important;
    }

    
</style>